require('./PageEngselect.styl');

import {Boxs, Group, Scroller, ScrollList, SearchBar} from 'saltui';
import {Component} from 'react';
import reactMixin from 'react-mixin';
import Store from './store';
import Reflux from 'reflux';
import Actions from './actions'
import {PropTypes} from "prop-types";
import {is} from 'immutable'
import Icon from 'salt-icon'

const HBox = Boxs.HBox;
const Box = Boxs.Box;
const {API_URL} = require(`./../../config/${ENV}.json`);
const {WithContainer} = SearchBar;

const Item = (props) => <Group.List>
  <div className='eng-t-list-wrap' key={props.index} onClick={() => {
    props.click(props.data);
  }}>
    <HBox vAlign="center">
      <HBox flex={1}>
        <Box>
          <img src={require('./../../images/architecture.jpg')}
               className='eng-t-list-img'/>
        </Box>
        <Box flex={1}>
          <p className='eng-t-list-title t-omit2'>
            {props.engName}</p>
          <p style={{color: '#666'}}>
            <img src={require('./../../images/5.png')} width={17} height={17}
                 style={{marginLeft: '3px'}}/>
            <span
              style={{marginLeft: '1px'}}> {props.xxjd ? props.xxjd : '暂无形象进度信息'}</span>
          </p>
          <p className='eng-t-list-text'><HBox>
            <Box style={{marginTop: '6px'}}><Icon name="map" fill="#BDBDBD" height={16}
                                                  width={16}/></Box>
            <Box style={{marginTop: '6px'}} onClick={(e) => {

            }}><span
              style={{marginLeft: '5px', fontSize: '13px'}}>{props.maptitle ? props.maptitle : '暂无地图信息'}</span></Box>
          </HBox></p>
        </Box>
        <Box><Icon name='angle-right' width="25px" fill="#555"/></Box>
      </HBox>
    </HBox>
  </div>
</Group.List>;


class Page extends Component {

  constructor(props) {
    super(props);
  }


  render() {
    let t = this;
    const props = {
      locale: 'zh_CN',
      instantSearch: true,
      hasHistory: true,
      searchDelay: 450,
      onEnter: () => {
        console.log('enter');
        Actions.engSearchClear();

      },
      onExit: () => {
        console.log('exit');
        Actions.engSearchClear();
      },
      onChange: (value) => {
        console.log(`Typing>>${value}`);
      },
      onSearch: (value) => {
        console.info(`Do search>>${value}`);
        Actions.engSearch(value);

      },
    };

    return (
      <div className="engs">
        <WithContainer {...props}>
          <Scroller className="page" mouseWheel>
            {this.state.engselect.searchItems.map((item, k) => {
              return <Group.List>
                <div className='eng-t-list-wrap' key={k} onClick={() => {
                  this.props.onEngClick(item);
                }}>
                  <HBox vAlign="center">
                    <Box flex={1}>
                      <p className='eng-t-list-title t-omit2'>
                        {item.engName}</p>
                      <p style={{color: '#666'}}>
                        <img src={require('./../../images/5.png')} width={17} height={17}
                             style={{marginLeft: '3px'}}/>
                        <span
                          style={{marginLeft: '1px'}}> {item.xxjd ? item.xxjd : '暂无形象进度信息'}</span>
                      </p>
                      <p className='eng-t-list-text'><HBox>
                        <Box style={{marginTop: '6px'}}><Icon name="map" fill="#BDBDBD" height={16}
                                                              width={16}/></Box>
                        <Box style={{marginTop: '6px'}}><span
                          style={{
                            marginLeft: '5px',
                            fontSize: '13px'
                          }}>{item.maptitle ? item.maptitle : '暂无地图信息'}</span></Box>
                      </HBox></p>
                    </Box>
                    <Box><Icon name='angle-right' width="25px" fill="#555"/></Box>

                  </HBox>
                </div>
              </Group.List>
            })
            }
          </Scroller>
        </WithContainer>

        <Group>
          <Group.Head>工程列表</Group.Head>
          <div className="container" style={{height: window.innerHeight - 126}}>
            <ScrollList scrollRefresh={false}
                        url={API_URL + '/jd/eng/dd/page'}
                        pageSize={10}
                        dataType="json"
                        currentPageKey="page"
                        beforeFetch={(data) => {
                          return {
                            page: data.page,
                            size: data.pageSize,
                            jdfzr: this.state.engselect.user.get('name') ? this.state.engselect.user.get('name') : '单文波'
                          }
                        }}
                        processData={(data) => {
                          return data
                        }}>
              <Item click={this.props.onEngClick}/>
            </ScrollList>
          </div>

        </Group>
      </div>
    );
  }


  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.engselect || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }

}

reactMixin.onClass(Page, Reflux.connect(Store, "engselect"));

export default Page;
